<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body ng-app="app">

<h1 translate="TITLE"></h1>

<p translate="TEXT"></p>

<p translate="TEXT_2"></p>

<p translate="TEXT_3"></p>

<p translate="TEXT_4"></p>

<p translate="TEXT"></p>

<p translate="TEXT_2"></p>

<p translate="TEXT_3"></p>

<p translate="TEXT_4"></p>

<p translate="NOT AVAILABLE"></p>

<p translate="ONLY_ES"></p>

<p translate="ONLY_FR"></p>

<p translate="ONLY_EN"></p>

<p translate="ONLY_DE"></p>

<div ng-controller="LangCtrl">
    <button ng-click="changeLang('de')">Deutsch</button>
    <button ng-click="changeLang('en')">Englisch</button>
    <button ng-click="changeLang('fr')">Franzoesisch</button>
    <button ng-click="changeLang('es')">Spanisch</button>
    <a ng-click="changeStack(['es','fr'])" style="text-decoration:underline;">Stack [es, fr] wechseln</a>
    <a ng-click="changeStack(['en'])" style="text-decoration:underline;">Stack [en] wechseln</a>
    <a ng-click="changeStack(['es','fr','en'])" style="text-decoration:underline;">Stack [es,fr,en] wechseln</a>
    <a ng-click="fbUse('fr')" style="text-decoration:underline;">fallbackIndex zu fr setzen</a>
    <a ng-click="fbUse('de')" style="text-decoration:underline;">fallbackIndex zu de setzen</a>
    <a ng-click="fbUse(false)" style="text-decoration:underline;">fallbackIndex zurücksetzen</a>
    <br/>

    Aktueller Stack: <span style="color: #cc0000" ng-bind="currentStack"></span> | Aktuelle Preferred: <span
        ng-bind="currentPref"></span> |
    Aktuelle SPRACHE: <span style="color: #00cc00" ng-bind="currentLang"></span>

</div>

<script src="../../bower_components/angular/angular.js"></script>
<script src="../../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../../src/translate.js"></script>
<script src="../../src/service/default-interpolation.js"></script>
<script src="../../src/service/handler-log.js"></script>
<script src="../../src/service/loader-static-files.js"></script>


<script src="../../src/service/storage-key.js"></script>
<script src="../../src/service/storage-local.js"></script>
<script src="../../src/service/storage-cookie.js"></script>
<script src="../../src/service/translate.js"></script>
<script src="../../src/directive/translate.js"></script>
<script src="../../src/filter/translate.js"></script>

<script>
    var app = angular.module('app', ['pascalprecht.translate', 'ngCookies']);

    app.config(function ($translateProvider) {
        $translateProvider

                .useStaticFilesLoader({
                    prefix: '',
                    suffix: '.json'
                })
                .preferredLanguage('de')
                .fallbackLanguage(['en', 'fr']).useLocalStorage();
    });

    app.controller('LangCtrl', function ($scope, $translate, $rootScope) {
        $scope.changeLang = function (key) {
            $translate.use(key);
        };

        $scope.fbUse = function (key) {
            console.log('fbUse set to ' + key);
            $translate.useFallbackLanguage(key);
            $translate.use($translate.use());
        }


        $scope.changeStack = function (parm) {
            $translate.preferredLanguage('en');
            $translate.fallbackLanguage(parm);
        }


            $rootScope.$on('$translateChangeSuccess', function () {
            $scope.currentStack = $translate.fallbackLanguage();
            $scope.currentPref = $translate.preferredLanguage();
            $scope.currentLang = $translate.use();
        });

    });
</script>
</body>
</html>
